<?php if (!defined('THINK_PATH')) exit();?>﻿<!DOCTYPE html>
<html lang="ZH-cn">
<head>
  <meta charset="UTF-8">
 <!--  <meta http-equiv="X-UA-Compateble" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1，maximum-scale=1,user-scalable=no"> 响应式 拒绝底部滑动条-->
  <title>回忆是一种幸福</title>
  <link href="/mydemo/Public/css/bootstrap.min.css" rel="stylesheet">
  <link href="/mydemo/Public/css/style.css" rel="stylesheet">
  <link rel="stylesheet" href="/mydemo/Public/css/font-awesome.min.css">
  <link rel="stylesheet" href="/mydemo/Public/css/animate.min.css">
  <link rel="stylesheet" href="/mydemo/Public/css/overwrite.css">
  <style>
      *{font-family: "Microsoft Yahei";font-size: 14px;}
  body{width:auto; min-width: 1200px;height: 100%; background: #fff;}
  .head_wrap{height: 120px;background: #fff;width:1200px;margin:0 auto;}
  .head_logo{min-width:360px;height: 120px;}
  .head_logo img{width:220px;height: 100px;margin-left: 100px;margin-top: 10px;cursor:pointer;}
  .head_logo h1{color: #F97B06}
  .head_search{margin-top: 40px;}
  .head_search .btn{border-top:1px solid rgb(204,204,204);border-bottom:1px solid rgb(204,204,204);padding-top:6px;}
  .center_wrap{background: #DDD;width:1200px;margin:0 auto;height: 100%}
  .center_title{width:100%;background-color: #ccc;height:40px;line-height: 40px; border-bottom :1px solid #fff;}
  .center_title span:first-child{font-size: 20px;padding-left:12px;}
  .center_title a{padding-right:12px; color: #000}
  .center_title span {font-weight: bolder;}
  .title{width: 100%;float: left;position: relative;min-height: 1px;}
  .largeImg{text-align: center}
  .largeImg .largeImgContent{max-width:100% !important; cursor: pointer }/*max-height: 800px;可设高度限制*/
    .footer_wrap{width: 1200px;margin:0 auto}
  </style>
 <script src="/mydemo/Public/js/jquery-2.1.1.min.js"></script>
</head>
<body>
    <div class="page-content">
    
<style>

.content{
  display: block;
  width:100%;
  margin-top: 15px;
  overflow: hidden;
   white-space: nowrap;
  text-overflow: ellipsis;
}
.content2{
  font-size: 20px;
  display: block;
  margin-top: 15px;
  width:100%;
  overflow: hidden;
   white-space: nowrap;
  text-overflow: ellipsis;
}
.coverLayout {
    position: fixed;
    left: 0px;
    top: 0px;
    background: rgba(0, 0, 0, 0.8);
    width: 100%;
    height: 100%;
    z-index: 10000;
    display: none;
}
.groupImgContent img{
    max-width: 100%;
    max-height: 100%;
    display: block;
    margin:0 auto;

}
.pagePrev{
  cursor: pointer;
}
.pagePrev:hover{
    background-color: #e6e6e6 !important;
}
.pageNext{
  cursor: pointer;
}
.pageNext:hover{
    background-color: #e6e6e6 !important;
}
</style>

        <!-- 全局头部文件 -->
  <div class="top-nav">
<nav class="navbar navbar-default" role="navigation">
   <div class="navbar-header">
      <a class="navbar-brand" href="<?php echo u('Index/index');?>">首页</a>
   </div>
   <div>
      <ul class="nav navbar-nav">
     <!--  <?php echo ($Think['session']['users']['user_name']); ?> -->
      <?php if(Think.session.users.user_name == ''): ?><li ><a href="#" onclick="alert_developed('登陆')">登陆</a></li><?php endif; ?>  
         <li><a href="#"  onclick="alert_developed('我的相册')">我的相册</a></li>
         <li><a href="<?php echo u('User/user_list');?>" >用户列表</a></li>
         <li class="dropdown">
            <a href="<?php echo u('User/userlist');?>" class="dropdown-toggle"   data-toggle="dropdown">
               <?php echo ((isset($_SESSION['users']['user_name']) && ($_SESSION['users']['user_name'] !== ""))?($_SESSION['users']['user_name']):'用户中心'); ?>
               <b class="caret"></b>
            </a>
            <ul class="dropdown-menu">
               <li><a href="<?php echo u('User/index');?>">个人中心</a></li>
               <li><a href="#">上传图片</a></li>
               <li><a href="/mydemo/index.php/Picture/wall">图片墙</a></li>
               <li class="divider"></li>
               <li><a href="#">我的好友</a></li>
               <li><a href="#">我的留言</a></li>
               <li class="divider"></li>
               <li><a href="<?php echo u('Login/logout');?>">退出登陆</a></li>
            </ul>
         </li>
      </ul>
   </div>
</nav> 
  </div> 


  



        

<body>
  <div class="coverLayout">
    <div class="groupImgContainer" style="max-width:1200px;margin:0 auto">
      <div class="pagePrev" style="height:100%;width:50px;float:left;background: #fff">
        <
      </div>
      <div class="groupImgContent" style="float:left;width:1100px;display:table-cell;vertical-align:middle;text-align: center;background: #fff">
      
        
      </div>
      <div class="pageNext" style="height:100%;width:50px;float:right;background: #fff">
        >
      </div>
    </div>
  </div>
  
  
  <div class="head_wrap row">
    <div class="head_logo col-sm-4">
      <!-- <img src="/mydemo/Public/img/lunbo_02.jpg" alt=""> -->
      <h1>回忆是一种幸福</h1>
    </div>
    <div class="head_search col-sm-8">
      <div class="search_content row">
        <div class="col-xs-12 col-sm-8">
          <div class="input-group">
            <input type="text"  class="form-control search-query" placeholder="">
            <span class="input-group-btn">
              <button type="button" class="btn btn-purple btn-sm">
                搜索
                <i class="ace-icon fa fa-search icon-on-right bigger-110"></i>
              </button>
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="center_wrap row">
    <div class="title">
      <p class="center_title">
        <span>最新图片</span>
        <a href="<?php echo u('img_list',array('title'=>'news'));?>" class="pull-right"> 更多>></a>
      </p>
    </div>
  <div id="gallery">
    <div class="container">
      <div class="row">
      <?php if(is_array($list)): $i = 0; $__LIST__ = $list;if( count($__LIST__)==0 ) : echo "" ;else: foreach($__LIST__ as $key=>$vo): $mod = ($i % 2 );++$i;?><figure class="effect-chico">           
          <div class="col-md-3 wow fadeInUp" data-wow-offset="0" data-wow-delay="0.3s">
            <a href="/mydemo/Public/<?php echo ($vo["url"]); ?>" class="flipLightBox">
            <img src="/mydemo/Public/<?php echo ($vo["thumb_url"]); ?>" class="img-responsive" alt="" onerror="this.src='/mydemo/Public/img/moren.jpg'">
            </a>            
          </div>
        </figure><?php endforeach; endif; else: echo "" ;endif; ?>
      </div>
    </div>

  </div><!--/#gallery-->

    <div class="title">
      <p class="center_title">
        <span>组图图片</span>
        <a href="<?php echo u('img_list',array('title'=>'zutu'));?>" class="pull-right"> 更多>></a>
      </p>
    </div>
    <div class="col-sm-12">
      <div class="groupimg_content">
        <div class="row">

      <?php if(is_array($zutu)): $i = 0; $__LIST__ = $zutu;if( count($__LIST__)==0 ) : echo "" ;else: foreach($__LIST__ as $key=>$vo): $mod = ($i % 2 );++$i;?><div class="col-sm-4 col-md-4">
            <!-- <a href="<?php echo u('zutu_list',array('zutu_id'=>$vo['zutu_id']));?>" class="thumbnail"> -->
            <a href="#" class="groupImg thumbnail">
              <img src="/mydemo/Public/<?php echo ($vo["thumb_url"]); ?>" imgtitle="宋志来傻B" class="imgcss"  onerror="this.src='/mydemo/Public/img/moren.jpg'"alt="...">

                    <div class="caption">
                      <h3><?php echo ($vo["zutu_name"]); ?></h3>
                      <p class="content"><?php echo ($vo["zutu_title"]); ?></p>
                    </div>
            </a>

          </div><?php endforeach; endif; else: echo "" ;endif; ?>
        </div>
      </div>
    </div>

<?php if(is_array($ctypelist)): $i = 0; $__LIST__ = $ctypelist;if( count($__LIST__)==0 ) : echo "" ;else: foreach($__LIST__ as $key=>$v): $mod = ($i % 2 );++$i;?><div class="title">
      <p class="center_title">
        <span><?php echo ($v["ctype_name"]); ?></span>
        <a href='<?php echo U("img_list",array("title"=>$v["ctype_id"],"ctype_name"=>$v["ctype_name"]));?>' class="pull-right"> 更多>></a>
      </p>
    </div>
    <div class="col-sm-12">
      <div class="groupimg_content">
        <div class="row">

      <?php if(is_array($v["list"])): $i = 0; $__LIST__ = $v["list"];if( count($__LIST__)==0 ) : echo "" ;else: foreach($__LIST__ as $key=>$g): $mod = ($i % 2 );++$i;?><div class="col-sm-4 col-md-3">
            <a href="#" class="thumbnail">
              <img src="/mydemo/Public/<?php echo ($g["thumb_url"]); ?>" imgtitle="周英秋傻B" class="imgcss" onerror="this.src='/mydemo/Public/img/moren.jpg'" alt="...">
                 <span style="position:absolute;left:0;top:140px;width:100%;height:30%;background:rgba(0,0,0,.3);display:none;text-align:center;margin-top:0px;color:#fff;font-size:15px;">
                  <p class="content2"><?php echo ($g["title"]); ?></p>
                </span>
            </a>
          </div><?php endforeach; endif; else: echo "" ;endif; ?>
        </div>
      </div>
    </div><?php endforeach; endif; else: echo "" ;endif; ?>
  </div>

</body>

          
  <script>
  var indexActive;
    $(function(){
      
      $(".groupImg").bind("click", function(e){
        e.preventDefault();

        var arrHtml = [];
        arrHtml.push($(this)[0].innerHTML);
        var index = $(this).parent().siblings().find('.groupImg img');
        for(var i = 0; i < index.length; i++ ){
          arrHtml.push(index[i].parentElement.innerHTML);
        }
       // var arr = arrHtml;
       for(var j = 0 ; j < arrHtml.length; j++){
          $(".groupImgContent").append(arrHtml[j]);
       }
       // console.log(arrHtml.length);
        $(".coverLayout").css("display","block");
        debugger;
       $(".groupImgContent .caption").hide();   
       $(".groupImgContent img").hide();
       var imgIndex = $(".groupImgContent img");
       for(var k = 0 ; k < imgIndex.length; k++){
            $(".groupImgContent img").eq(k).attr("id","img"+k);
            // $(".groupImgContent caption").eq(k).attr("id","caption"+k);
       }
       $("#img0").fadeIn("fast");
       debugger;
       $("#img0").siblings(".caption").eq(0).show();
       indexActive = 0;
       // $(".groupImgContent img").eq(0).fadeIn("fast");

       var h = $(window).height();
       var h1 = $(".groupImgContent img").eq(0).height();
       var imgMargin = (h-h1)/2;
       $(".groupImgContent img").css("margin-top",imgMargin );
       $(".groupImgContainer").css("height",h);
       $(".groupImgContent").css("height",h);
      setPageBindEvent(imgIndex.length);

       // $(".groupImgContent a").eq(0).css("display","block");
        
       


      })
      function setPageBindEvent(l){
        $(".pagePrev").on('click',  function(event) {
          event.preventDefault();
          if(indexActive == 0){
            console.log("第一张，别点了");
          }else{
            indexActive = indexActive - 1;
            $(".groupImgContent img").hide(); 
            $(".groupImgContent .caption").hide(); 
            $("#img"+indexActive).fadeIn("fast");
            $("#img"+indexActive).siblings(".caption").eq(0).show();
          }
          setImgCenter(indexActive);
          
        });
        $(".pageNext").on('click',  function(event) {
          event.preventDefault();
          if(indexActive+1 == l){
            console.log("最后一张，别点了");
          }else{
            indexActive = indexActive + 1;
            $(".groupImgContent img").hide();
            $(".groupImgContent .caption").hide();  
            $("#img"+indexActive).fadeIn("fast");
            $("#img"+indexActive).siblings(".caption").eq(indexActive).show();
          }
          setImgCenter(indexActive);
          
        });
        // var sel = $("[id* = img]");
        $(".groupImgContent img").unbind('click').bind('click', function(event) {
          $(".coverLayout").css("display","none");
          $(".groupImgContent").empty();
        });
        
      }
      function setImgCenter(indexActive){
        
        var h1 = $("#img"+indexActive).height();
        var h = $(window).height();
        $(".groupImgContent img").css("margin-top",(h-h1)/2);
      }
     
     

      /*不知道为什么不起作用-----你之前写过这种函数*/
      $(window).on("rezize", function(){
      debugger;
        var h = $(window).height();
        $(".groupImgContainer").css("height",h);
        $(".groupImgContent").css("height",h);






      })




    })


  </script>

  




        <div id="footer">
    <div class="footer1">
    <div class="title">
      <p class="center_title">
        <span>友情链接</span>
      </p>

    </div>
      <div style="clear: both;"></div>
      <div id="friend_link">
        <a target="_blank" href="http://www.chengzhier.com">橙汁儿电影网</a>
        <a target="_blank" href="http://zhixing.zxtms.net">知行工作室</a>
        <a target="_blank" href="http://www.huanyan520.com">焕言工作室</a>
        
        <a target="_blank" href="http://www.urionz.com">有时梦游博客</a>
      </div>
    </div>
    
    <div class="footer2">
      <div class="wrap">
        <p></p>
        <p>© 2016 <a href="http://www.chengzhier.com/" title="Sun"><strong>Sun</strong></a>. All rights reserved.</p>
        <p></p>
        
        <p> 技术支持 <strong style="color: #ff7d00;">Song、Zhou</strong></p>
        <p></p>
        <p>该网站的自图片都来自与<strong style="color: #ff7d00;">sunqiu</strong>收藏，记录身边的成长</p>
      </div>
    </div>
  </div>
 <script src="/mydemo/Public/js/bootstrap.min.js"></script>
  <script src="/mydemo/Public/js/parallax.min.js"></script>
  <script src="/mydemo/Public/js/wow.min.js"></script>
  <script src="/mydemo/Public/js/jquery.easing.min.js"></script>
  <script type="text/javascript" src="/mydemo/Public/js/fliplightbox.min.js"></script>
  <script src="/mydemo/Public/js/functions.js"></script>
  <script type="text/javascript" src="/mydemo/Public/layer/layer.js"></script>
  <script type="text/javascript">
    function alert_developed(data){
        alert(data+"待开发，敬请期待");
        return false;
      }
</script>


        

    </div>
</body>
</html>